<template>
  <div class="boxMain">
    <div>
      <el-form :inline="true" :model="search" size="small" class="demo-form-inline">
        <el-form-item>
          <el-input v-model="search.code" placeholder="编码" clearable />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="load">查询</el-button>
          <el-button @click="">重置</el-button>
          <el-button type="primary" @click="openSaveDialog">新增</el-button>
        </el-form-item>
      </el-form>
      <el-table border :data="tableData" style="width: 100%;" height="700px">
        <el-table-column type="selection" width="40"></el-table-column>
        <el-table-column label="编码" prop="code" min-width="100">
          <template #default="scope">
            <el-link @click="findDataDetail(scope.row.code)" type="primary">{{ scope.row.code }}</el-link>
          </template>
        </el-table-column>
        <el-table-column label="数据名" prop="name" min-width="60" />
        <el-table-column label="创建人" prop="createUser" width="180" />
        <el-table-column label="创建时间" prop="createTime" />
        <el-table-column label="更新时间" prop="updateTime" />
        <el-table-column label="设置" width="100" fixed="right" align="center">
          <template #default="scope">
            <el-link type="primary" @click="findDataDict(scope.row.id)">编辑</el-link>&ensp;
            <el-link type="danger" @click="">删除</el-link>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div class="pageCss">
      <el-pagination v-model:current-page="search.page" v-model:page-size="search.size" :page-sizes="[5, 10, 30, 50]"
        small="small" background layout="total, sizes, prev, pager, next, jumper" :total="total" @change="load" />
    </div>
  </div>
  <!-- dialog -->
  <el-dialog draggable overflow v-model="saveDialog" title="Shipping address" width="40%" align-center destroy-on-close
    :close-on-click-modal="false" @closed="closeDialog">

    <template #header>
      <span>保存</span>
    </template>
    <div style="height: 100px;overflow-y: auto;">
      <el-form :model="data" ref="dataRef" :rules="dataRules" size="small" class="demo-form-inline demo-ruleForm">
        <el-form-item label="编码" prop="code">
          <el-input :disabled="data.id" v-model.trim="data.code" placeholder="编码" clearable />
        </el-form-item>
        <el-form-item label="名称" prop="name">
          <el-input v-model.trim="data.name" placeholder="名称" clearable />
        </el-form-item>
      </el-form>
    </div>

    <template #footer>
      <div class="dialog-footer">
        <el-button @click="saveDialog = false">取消</el-button>
        <el-button type="primary" @click="save">
          确认
        </el-button>
      </div>
    </template>
  </el-dialog>


  <!-- 字典明细dialog -->
  <el-dialog draggable overflow v-model="dataDictDetailDialog" title="Shipping address" width="40%" align-center
    destroy-on-close :close-on-click-modal="false" @closed="closeDataDictDetailDialog">

    <template #header>
      <span>{{ dataDictAndDetailList.name }}-字典明细</span>
    </template>
    <div style="height: 400px;overflow-y: auto;">
      <el-form :inline="true" :model="search" size="small" class="demo-form-inline">
        <!-- <el-form-item>
          <el-input v-model="search.name" placeholder="名称" clearable />
        </el-form-item> -->
        <el-form-item>
          <!-- <el-button type="primary" @click="findDataDetail(dataDictAndDetailList.code,search.name)">查询</el-button> -->
          <el-button type="primary" @click="addDataDictDetail">新增</el-button>
        </el-form-item>
      </el-form>
      <el-table border :data="dataDictAndDetailList.dataDictDetails" style="width: 100%;" height="340px">
        <el-table-column label="名称" prop="name">
          <template #default="scope">
            <el-input v-if="scope.row.edit" v-model="scope.row.name"></el-input>
            <span v-else>{{ scope.row.name }}</span>
          </template>
        </el-table-column>
        <el-table-column label="排序" prop="sort" />
        <el-table-column label="显示" width="80" prop="isShow">
          <template #default="scope">
            <el-switch :disabled="!scope.row.edit" v-model="scope.row.isShow" inline-prompt active-text="是"
              inactive-text="否" />
          </template>
        </el-table-column>
        <el-table-column label="设置" width="100" fixed="right" align="center">
          <template #default="scope">
            <el-link type="danger" @click="">删除</el-link>&ensp;
            <el-link type="primary" v-if="!scope.row.edit" @click="scope.row.edit = true">编辑</el-link>
            <el-link type="success" v-if="scope.row.edit" @click="saveDataDictDetail(scope.row)">保存</el-link>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <!-- <template #footer>
      <div class="dialog-footer">
        <el-button @click="dataDictDetailDialog = false">取消</el-button>
      </div>
    </template> -->
  </el-dialog>

</template>

<script>
import { ref } from "vue"
import utils from "@/common/utils"
import { dayjs } from "element-plus"
import { getDataDictDetail, getDataDict, saveDataDictDetail } from "@/api/req.js"
export default {
  data() {
    return {
      tableData: [],
      search: { page: 1, size: 10, name: null },
      saveDialog: false,
      data: {name:null,code:null},
      dataRules: {
        name: [{ required: true }],
        code: [{ required: true }]
      },
      total: 0,
      dataDictDetailDialog: false,
      dataDictAndDetailList: []
    }
  },
  created() {
    this.load()
  },
  methods: {
    openSaveDialog() {
      this.saveDialog = true
    },
    closeDialog() {
      this.$nextTick(() => {
        this.$refs.dataRef.resetFields()
        this.$refs.dataRef.clearValidate()
        this.data = this.$options.data().data
      })
    },
    load() {
      this.$axios.post(`/datadict/page?page=${this.search.page}&size=${this.search.size}`, this.search).then(({ data }) => {
        if (data.code == 0) {
          this.tableData = data.data.records
          this.total = data.data.total
        }
      })
    },
    save() {
      const action = this.data.id ? 'update' : 'save'
      this.$axios.post(`/datadict/${action}`, this.data).then(({ data }) => {
        if (data.code == 0) {
          this.load()
          this.saveDialog = false
        }
      })
    },
    async findDataDetail(code,name) { //查询字典明细
      let { data: tableData } = await getDataDictDetail([code]);
      this.dataDictAndDetailList = tableData[0]
      this.dataDictDetailDialog = true
    },
    async findDataDict(id) {
      let data = await getDataDict({ id: id });
      if (data) {
        this.data = data.data
        this.saveDialog = true
      }
    },
    closeDataDictDetailDialog() {

    },
    addDataDictDetail() {
      if (this.dataDictAndDetailList.dataDictDetails.some(x => x.edit)) {
        this.$message({
          message: "请先保存",
          type: "warning"
        })
        return
      }
      this.dataDictAndDetailList.dataDictDetails.push({ datadictCode: this.dataDictAndDetailList.code, edit: true, name: "", isShow: true, sort: this.dataDictAndDetailList.dataDictDetails.length + 1 })
    },
    async saveDataDictDetail(row) {
      const data = await saveDataDictDetail(row)
      this.findDataDetail(row.datadictCode)
      row.edit = false
      this.$message({
        type: "success",
        message: data.msg
      })
    }
  }
}
</script>

<style scoped>
.my-header {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  gap: 16px;
}

#imgDialog>.el-dialog__header {
  padding-bottom: 0px !important;
}

.closeImg:hover {
  color: rgba(243, 12, 12, 0.842);
  cursor: pointer;
}
</style>

<style>
/* @import url(); 引入css类 */
.boxMain {
  height: 100%;
  /* overflow-y: auto; */
}

.pageCss {
  position: absolute;
  bottom: 0px;
  left: calc(100% - 70%);
  z-index: 100;
}

.leftChapter {
  width: 200px;
  height: 100%;
}

.el-tabs__content {
  height: 100% !important;
}

.rightContent {
  margin-left: 10px;
  width: calc(100% - 200px);
}

.editCss {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  margin: 0px 10px 5px 0px;
}

.handlerCss>.el-icon:hover {
  cursor: pointer;
  color: #1890ff;
}

.list-group>li:hover {
  background-color: #bebcbcda;
}

.check:hover {
  background-color: rgba(43, 247, 169, 0.973) !important;
}

.avatar {
  width: 178px;
  height: 178px;
  display: block;
}
</style>